<template>
  <div class="h-full flex flex-col">
    <!-- <Draggable>
      <div class="h-[100px] w-[160px]">AI生成内容</div>
    </Draggable> -->
    <div class="model-header p-[10px]">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="3" class="mb-[15px]">
          <el-input v-model="queryData.id" placeholder="请输入数据ID" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="3" class="mb-[15px]">
          <el-input v-model="queryData.content" placeholder="请输入数据内容" />
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="3" class="mb-[15px]">
          <el-select
            v-model="queryData.labeledStatus"
            placeholder="请选择标注状态"
          >
            <el-option
              v-for="item in options.labeledStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="3" class="mb-[15px]">
          <el-select v-model="queryData.isValidity" placeholder="是否有效">
            <el-option
              v-for="item in options.isValidity"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="mb-[15px]">
          <div class="flex">
            <el-button class="w-[80px]" color="#626aef" type="primary">
              批量导出
            </el-button>
            <el-button class="w-[80px]" color="#626aef" type="primary">
              查询
            </el-button>
            <el-button class="w-[80px]" color="#626aef" type="primary">
              新增数据
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="sheet flex-1 overflow-auto">
      <!-- <div>用户信息: {{ userInfos }}</div> -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'font-weight': 'bold', color: '#333' }"
      >
        <el-table-column prop="id" label="数据ID" width="150" />
        <el-table-column prop="dataContent" label="数据内容">
          <template #default="{ row }">
            <div class="truncate-text" :title="row.dataContent">
              {{ row.dataContent }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="systemLabeled" label="系统标注" align="center" />
        <el-table-column prop="manualLabeled" label="人工标注" align="center" />
        <el-table-column prop="labeledStatus" label="标注状态" align="center">
          <template #default="{ row }">
            <el-tag
              effect="dark"
              :type="row.labeledStatus === 1 ? 'info' : 'success'"
            >
              {{ row.labeledStatus === 1 ? '待标注	' : '已标注' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isExample" label="是否为案例" align="center">
          <template #default="{ row }">
            {{ row.isExample === 1 ? '是	' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="isValidity" label="是否有效" align="center">
          <template #default="{ row }">
            {{ row.isValidity === 1 ? '有效	' : '无效' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="160"
          align="center"
        />
        <el-table-column label="操作" align="center" width="260">
          <template #default="{ row }">
            <el-button type="primary" text>
              <Edit class="w-[18px] h-[18px] mr-[2px]" />
              <span>编辑</span>
            </el-button>
            <el-button type="primary" text>
              <SvgIcon
                class="mr-[4px]"
                name="examine"
                size="18px"
                color="#409EFF"
              />
              <span>查看</span>
            </el-button>
            <el-button type="primary" text>
              <SvgIcon
                class="mr-[4px]"
                :name="row.isExample === 1 ? 'cancel' : 'case'"
                size="18px"
                color="#409EFF"
              />
              <span>{{ row.isExample ? '取消标注案例' : '设为标注案例' }}</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="queryData.pageNum"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineAsyncComponent, reactive } from 'vue';

  const SvgIcon = defineAsyncComponent(
    () => import('@/components/SvgIcon.vue'),
  );

  const queryData = reactive({
    id: '', //数据ID
    content: '', //数据内容
    labeledStatus: '', //标注状态
    isValidity: '', //是否有效
    pageNum: 1, //页码
    pageSize: 10, //页数
  });

  const options = reactive({
    labeledStatus: [
      {
        label: '无标注任务',
        value: '无标注任务',
      },
      {
        label: '待标注',
        value: '待标注',
      },
      {
        label: '已标注',
        value: '已标注',
      },
      {
        label: '待审核',
        value: '待审核',
      },
      {
        label: '审核不通过',
        value: '审核不通过',
      },
      {
        label: '审核通过',
        value: '审核通过',
      },
    ],
    isValidity: [
      {
        label: '无效',
        value: '无效',
      },
      {
        label: '有效',
        value: '有效',
      },
    ],
  });

  const tableData = [
    {
      assignTime: null,
      auditCause: null,
      colName: null,
      dataContent:
        ' "客服：您好，这边是中国联通，请问您的手机号是幺六七六零二二七二八的机主，对吧？\\n客户：嗯。\\n客服：啊，来电呢是联通回馈优质用户的呃，帮您把这张联通卡的网络信号做一个全面的优化和提升。后期你用起来就会更快，更稳定了。公司回馈优质用户啊，每月多加次月，有的语音套会包有一百三十分钟的语音通话是回馈给您的。您可以直接用您的月租，还是之前的月租，继续用就行了。没有调整你的月租，您放心，希望你用的满意满以后多多支持我们联通。那这边为你登记办理好，您放心用就行了，好吧。\\n客户：那你自己搞就可以了。\\n客户：把他提升就可以啦。\\n客户：李姐。\\n客户：怎么怎么用啊？\\n客服：嗯，这边为您登记办理好，您放心用就行了，好吧。\\n客户：怎么这么个做法呀，你把他升级是不是？\\n客服：嗯，对的。\\n客户：套餐呢？\\n客服：嗯，套餐呢，还是你原来的套餐费用就可以了。\\n客户：你这个是。\\n客户：中国联通啊，你升级是怎么搞？把它升成五G吗？\\n客服：嗯，对的。\\n客服：嗯，对的。\\n客户：那我这本来就是五G的呀。\\n客服：嗯，再帮你把网络做一个优化和提升，网速会更快，信号会更好，网速会比之前快点的三倍。\\n客户：你失效。\\n客户：记办。\\n客户：那应该不用吧。\\n客服：嗯，这边的话，网网速给您调。\\n客户：不用那么快的，不用我这边。\\n客户：不用应该不用不用优化，我这应该还挺合适的。\\n客服：啊，帮您把网络信号做一个更好的优化和提升嘛。\\n客户：不用不用。\\n客户：这很好的啊。\\n客服：啊，你孩子保留你原来的月租继续用就行了。\\n客户：对。\\n客服：啊，您看可以吗？\\n客户：嗯。\\n客户：保留言那个就可以了，现在不要不要不要去优化，不要那些都不要了啊。\\n客户：不用。\\n客户：听得懂吗？\\n客服：嗯，听得到。\\n客户：嗯，听到就可以了，不用我就就我用用我原来的套餐。\\n客户：嗯。\\n客服：好的，那就不打扰您了，再见。\\n客户：嗯。\\n客户：嗯，好。",\n',
      dataRemark: null,
      id: 25523,
      isExample: 1,
      isValidity: 1,
      labeledStatus: 2,
      llmId: 46,
      manualLabeled: '有',
      subTaskId: null,
      subTaskStatus: null,
      systemLabeled: '无',
      taskLabeledType: null,
      taskName: null,
      updateTime: '2025-03-12 09:20:26',
    },
    {
      assignTime: null,
      auditCause: null,
      colName: null,
      dataContent:
        ' "客服：您好，这边是中国联通，请问您的手机号是幺六七六零二二七二八的机主，对吧？\\n客户：嗯。\\n客服：啊，来电呢是联通回馈优质用户的呃，帮您把这张联通卡的网络信号做一个全面的优化和提升。后期你用起来就会更快，更稳定了。公司回馈优质用户啊，每月多加次月，有的语音套会包有一百三十分钟的语音通话是回馈给您的。您可以直接用您的月租，还是之前的月租，继续用就行了。没有调整你的月租，您放心，希望你用的满意满以后多多支持我们联通。那这边为你登记办理好，您放心用就行了，好吧。\\n客户：那你自己搞就可以了。\\n客户：把他提升就可以啦。\\n客户：李姐。\\n客户：怎么怎么用啊？\\n客服：嗯，这边为您登记办理好，您放心用就行了，好吧。\\n客户：怎么这么个做法呀，你把他升级是不是？\\n客服：嗯，对的。\\n客户：套餐呢？\\n客服：嗯，套餐呢，还是你原来的套餐费用就可以了。\\n客户：你这个是。\\n客户：中国联通啊，你升级是怎么搞？把它升成五G吗？\\n客服：嗯，对的。\\n客服：嗯，对的。\\n客户：那我这本来就是五G的呀。\\n客服：嗯，再帮你把网络做一个优化和提升，网速会更快，信号会更好，网速会比之前快点的三倍。\\n客户：你失效。\\n客户：记办。\\n客户：那应该不用吧。\\n客服：嗯，这边的话，网网速给您调。\\n客户：不用那么快的，不用我这边。\\n客户：不用应该不用不用优化，我这应该还挺合适的。\\n客服：啊，帮您把网络信号做一个更好的优化和提升嘛。\\n客户：不用不用。\\n客户：这很好的啊。\\n客服：啊，你孩子保留你原来的月租继续用就行了。\\n客户：对。\\n客服：啊，您看可以吗？\\n客户：嗯。\\n客户：保留言那个就可以了，现在不要不要不要去优化，不要那些都不要了啊。\\n客户：不用。\\n客户：听得懂吗？\\n客服：嗯，听得到。\\n客户：嗯，听到就可以了，不用我就就我用用我原来的套餐。\\n客户：嗯。\\n客服：好的，那就不打扰您了，再见。\\n客户：嗯。\\n客户：嗯，好。",\n',
      dataRemark: null,
      id: 25524,
      isExample: 0,
      isValidity: 1,
      labeledStatus: 1,
      llmId: 46,
      manualLabeled: '有',
      subTaskId: null,
      subTaskStatus: null,
      systemLabeled: '无',
      taskLabeledType: null,
      taskName: null,
      updateTime: '2025-03-12 09:37:13',
    },
  ];

  const handleSizeChange = (val: number) => {
    queryData.pageSize = val;
  };

  const handleCurrentChange = (val: number) => {
    queryData.pageNum = val;
  };
</script>

<style scoped>
  .el-button {
    padding: 5px !important;
  }
</style>
